<template>
	<view class="wrap">
		<my-loading :vshow="loadingshow"></my-loading>
		<!-- 顶部产品信息 -->
		<view class="content-product">
			<view class="product-left">
				<image :src="productInfo.thumbs_text[0]" mode=""></image>
			</view>
			<view class="product-right">
				<view class="right-name">
					{{productInfo.name}}
				</view>
				<view class="right-info">
					<text>{{productInfo.registrationTime}} | {{productInfo.kilometers}} | {{productInfo.vehiclesourceArea}}</text>
				</view>
			</view>
		</view>
		
		<!-- 提车方案 -->
		<view class="plan">
			<view class="plan-title">
				前往门店提车
			</view>
			<view class="plan-storename">
				<text>门店: {{productInfo.store.name}}</text>
			</view>
			<view class="plan-address">
				<u-icon name="map-fill" color="#65656d" size="28"></u-icon>{{productInfo.store.address}}
			</view>
			<view class="plan-tips">
				<text>现在预订,预计{{estimateTime}}可办理提车手续</text>
			</view>
			<view class="" style="height: 15rpx;"></view>
		</view>
	
		<!-- 费用明细 -->
		<view class="expenseDetails">
			<view class="expenseDetails-title">
				<text>购车费用明细</text>
			</view>
			<view class="expenseDetails-list">
				<view class="list-item">
					<view class="item-left">
						<text>车款</text>
					</view>
					<view class="item-right">
						<text>{{carfree}}元</text>
					</view>
				</view>
				<view class="list-item">
					<view class="item-left">
						<text>平台费</text>
					</view>
					<view class="item-right">
						<text>{{platformFee}}元</text>
					</view>
				</view>
				<view class="list-item">
					<view class="item-left">
						<text>上牌费</text>
					</view>
					<view class="item-right">
						<text>{{comfree}}元</text>
					</view>
				</view>
			</view>
			<view class="expenseDetails-line">
				<u-line color="#efefef" />
			</view>
			<view class="expenseDetails-cost">
				<view class="cost-left">
					<view class="">
						<text>全款费用</text>
					</view>
					<view class="" style="margin-left: 8rpx;" @click="costShow = true">
						<u-icon name="question-circle" color="#64626d" size="35"></u-icon>
					</view>
				</view>
				<view class="cost-right">
					<view class="" style="color: red;font-size: 22px;">
						<text>{{cost}}</text>
					</view>
					<view class="" style="margin-top: 13rpx;">
						元
					</view>
				</view>
			</view>
			<view class="expenseDetails-step">
				<u-steps :list="numList" mode="dot" active-color="#95959f"></u-steps>
			</view>
			<view class="" style="height: 15rpx;"></view>
		</view>
		
		<!-- 预订金额 -->
		<view class="free">
			<view class="" style="height: 15rpx;"></view>
			<view class="select">
				<view class="sel-content" @click="freeshow = true">
					<view class="con-title">
						选择预订金额
					</view>
					<view class="con-content">
						<view class="content-item">
							<view class="" style="font-size: 1.3rem;margin-left: 30rpx;height: 38px;line-height: 38px;">
								￥
							</view>
							<view class="" style="font-size: 1.3rem;margin-left: 30rpx;height: 38px;line-height: 38px;color: red;">
								<!--<u-input v-model="free" type="number" border="border" placeholder="请输入预订金额"/> -->
								{{free}}
							</view>
						</view>
					</view>
				</view>
				<view class="sel-time">
					<view class="time-title">
						选择到店时间
					</view>
					<view class="time-content" @click="dateShow = true">
						<view class="con-content">
							<view class="">
								{{reachDate}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 15rpx;"></view>
		</view>
		
		<!-- 过户证件 -->
		<view class="credential">
			<view class="credential-title">
				<text>车辆过户证件</text>
			</view>
			<view class="credential-list">
				<view class="list-item">
					<text>1.购车人身份证原件</text>
				</view>
				<view class="list-item">
					<text>2.根据车管所政策, 上牌城市珠海需要您本人到场配合办理过户手续</text>
				</view>
			</view>
			<view class="credential-tips" @click="credentialShow = true">
				<u-icon name="photo" color="#64626d" size="30"></u-icon>查看图例 >
			</view>
			<view class="" style="height: 15rpx;"></view>
		</view>
	
		<!-- 平台保障 -->
		<view class="ensure">
			<view class="ensure-title">
				<text>平台服务保障</text>
			</view>
			<view class="ensure-list" @click="ensureShow = true">
				<view class="list-item">
					<view class="item-left">
						<u-icon name="checkbox-mark" color="#403f45" size="28"></u-icon>免费换车
					</view>
					<view class="item-right">
						<u-icon name="arrow-right" color="#cbc9d4" size="28"></u-icon>
					</view>
				</view>
				<view class="list-line">
					<u-line color="#efefef" />
				</view>
				<view class="list-item">
					<view class="item-left">
						<u-icon name="checkbox-mark" color="#403f45" size="28"></u-icon>7天无理由退车
					</view>
					<view class="item-right">
						<u-icon name="arrow-right" color="#cbc9d4" size="28"></u-icon>
					</view>
				</view>
				<view class="list-line">
					<u-line color="#efefef" />
				</view>
				<view class="list-item">
					<view class="item-left">
						<u-icon name="checkbox-mark" color="#403f45" size="28"></u-icon>重大事故 | 火烧 | 泡水终身包退
					</view>
					<view class="item-right">
						<u-icon name="arrow-right" color="#cbc9d4" size="28"></u-icon>
					</view>
				</view>
				<view class="list-line">
					<u-line color="#efefef" />
				</view>
				<view class="list-item">
					<view class="item-left">
						<u-icon name="checkbox-mark" color="#403f45" size="28"></u-icon>30天全面保修
					</view>
					<view class="item-right">
						<u-icon name="arrow-right" color="#cbc9d4" size="28"></u-icon>
					</view>
				</view>
				<view class="list-line">
					<u-line color="#efefef" />
				</view>
				<view class="list-item">
					<view class="item-left">
						<u-icon name="checkbox-mark" color="#403f45" size="28"></u-icon>1年/2万公里质保
					</view>
					<view class="item-right">
						<u-icon name="arrow-right" color="#cbc9d4" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="" style="height: 15rpx;"></view>
		</view>
	
		<view class="term">
			<view class="termleft">
				<radio style="transform:scale(0.8)" :checked="checkedvalue" @click="checkedClick"/>我已阅读并同意
			</view>
			<view class="termright" @click="rulerShow = true">
				<text>《二手车交易规则》</text>
			</view>
		</view>
		
		<view class="" style="height: 100px;"></view>
		
		<view class="tips">
			<text style="margin-left: 30rpx;">现在预订,预计{{estimateTime}}可办理提车手续</text>
		</view>
		<view class="footer">
			<view class="footer-but">
				<u-button type="success" @click="open">确认预订</u-button>
			</view>
		</view>
		
		<u-picker mode="time" v-model="dateShow" :params="params" @confirm="dateConfirm"></u-picker>
		<u-popup v-model="costShow" mode="bottom" border-radius="14" length="40%" closeable="true">
			<view class="costShow">
				<view class="costShow-title">
					全款费用
				</view>
				<view class="costShow-list">
					<view class="" v-html="freeinfo">
						
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="credentialShow" mode="bottom" border-radius="14" length="40%" closeable="true">
			<view class="credentialShow">
				<view class="credentialShow-title">
					请提前准备过户证件
				</view>
				<view class="credentialShow-list">
					<view class="list-item">
						<text>1.购车人身份证原件</text>
					</view>
					<view class="list-item">
						<text>2.根据车管所政策，上牌城市珠海需要您本人到场配合办理过户手续</text>
					</view>
					<view class="list-item">
						<view class="item-img">
							<image src="https://adjyxw.h1668.com/uploads/20230922/39839bc423d2963cf1d35e23dd940311.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="ensureShow" mode="bottom" border-radius="14" length="70%" closeable="true">
			<view class="ensureShow">
				<view class="ensureShow-title">
					平台保障
				</view>
				<view class="ensureShow-list">
					<view class="list-item">
						<view class="item-title">
							<u-icon name="checkmark-circle-fill" color="#029940" size="35"></u-icon>免费换车
						</view>
						<view class="item-text">
							<text>无需承担额外费用, 享换车服务。</text>
						</view>
					</view>
					<view class="list-item">
						<view class="item-title">
							<u-icon name="checkmark-circle-fill" color="#029940" size="35"></u-icon>7天无理由退车
						</view>
						<view class="item-text">
							<text>车辆送达后您可充分体验车辆驾驶感受, 如不满意, 满足7退条件(7天内、车辆尚未开始办理过户、试驾不超450公里、无违章无事故、不影响二次销售)可享受“7天无理由退车”。</text>
						</view>
					</view>
					<view class="list-item">
						<view class="item-title">
							<u-icon name="checkmark-circle-fill" color="#029940" size="28"></u-icon>重大事故、火烧、泡水终身包退
						</view>
						<view class="item-text">
							<text>所购车辆如果在交付前就存在重大事故、火烧、泡水车, 可终身原价退车。</text>
						</view>
					</view>
					<view class="list-item">
						<view class="item-title">
							<u-icon name="checkmark-circle-fill" color="#029940" size="28"></u-icon>30天全面保修
						</view>
						<view class="item-text">
							<text>在首次提车后30天内车辆出现非事故、非人为、非外力、非定期保养部件或项目产生的车辆故障, 瓜子为您提供维修厂进行免费维修。(特殊车型及其个别零部件除外)。</text>
						</view>
					</view>
					<view class="list-item">
						<view class="item-title">
							<u-icon name="checkmark-circle-fill" color="#029940" size="28"></u-icon>1年/2万公里质保
						</view>
						<view class="item-text">
							<text>30天质保结束后, 针对年限小于8年且里程小于15万公里以下车源, 赠送1年或2万公里(以先到者为准)内, 保修发动机、变速箱系统(赠送范围不含电动车、混动车、改装车)。</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="rulerShow" mode="bottom" border-radius="14" length="70%" closeable="true">
			<view class="costShow">
				<view class="costShow-title" style="text-align: center;">
					二手车交易规则
				</view>
				<view class="costShow-list">
					<view class="" v-html="costShowcontnet">
						
					</view>
				</view>
				<view class="content-buttom">
					<radio style="transform:scale(1)" :checked="checkedvalue" @click="checkedClick"/>我已阅读并同意《二手车交易规则》
				</view>
			</view>
		</u-popup>
		<u-modal v-model="modalShow" :show-title="false" :mask-close-able="true" @confirm="modalConfirm">
			<view class="slot-content">
				<view class="content-cancel" @click="modalShow = false">
					取消
				</view>
				<view class="content-select">
					选择支付
				</view>
				<view class="content-price">
					{{free}}
				</view>
				<view class="content-opt">
					<u-line color="red" />
					<view class="balance">
						<view class="balance-opt">
							<view class="opt-title">
								余额支付(剩余:{{balance}})
							</view>
							<view class="opt-value">
								<radio style="transform:scale(1)" :checked="value5" @click="balanceClick" :disabled="balanceRadio"/>
							</view>
						</view>
					</view>
					<u-line color="red" />
					<view class="weixin">
						<view class="weixin-title">
							微信支付
						</view>
						<view class="weixin-value">
							<radio style="transform:scale(1)" :checked="value6" @click="weixinClick" />
						</view>
					</view>
					<u-line color="red" />
				</view>
			</view>
		</u-modal>
		<u-select v-model="freeshow" :list="freelist" @confirm="freeconfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: 0,
				stoid: 1,
				productInfo: [],
				userInfo: [],
				loadingshow: false,
				estimateTime: '',//预计提车日期
				reachDate: '',//到店日期时间
				cost: '6.70',//全款费用
				carfree: '',//车辆费用
				comfree: '',//车辆上牌费
				platformFee: 0,//车辆平台费
				balance: 0,//余额
				balanceRadio: false,
				free: 100,//预订金额
				numList: [
					{
						name: '支付订金'
					}, 
					{
						name: '线下验车'
					}, 
					{
						name: '提车支付'
					} 
				],
				checkedvalue: false,
				dateShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				costShow: false,
				credentialShow: false,
				ensureShow: false,
				rulerShow: false,
				modalShow: false,
				freeshow: false,
				value5: false,//余额支付
				value6: true,//微信支付
				freeinfo: '',
				costShowcontnet: '',
				freelist: [
					{
						value: '1',
						label: '100'
					},
					{
						value: '2',
						label: '200'
					},
					{
						value: '3',
						label: '300'
					},
					{
						value: '4',
						label: '400'
					},
					{
						value: '5',
						label: '500'
					},
					{
						value: '6',
						label: '600'
					},
					{
						value: '7',
						label: '700'
					},
					{
						value: '8',
						label: '800'
					},
					{
						value: '9',
						label: '900'
					},
					{
						value: '10',
						label: '1000'
					},
				],
			}
		},
		onLoad(options) {
			this.productId = options.id
			this.getProdcutInfo()
			this.getDates()
			this.getescfreeinfo()
			this.getclause()
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userData');
			this.getUserData()
			this.openid = uni.getStorageSync('openid');
			if(this.openid == '') {
				this.login()
			}
		},
		methods: {
			freeconfirm(e) {
				this.free = e[0].label
			},
			modalConfirm() {
				if(this.value6 == true) {
					this.submit()
				}else if(this.value5 == true) {
					this.balancePay()
				}
			},
			//余额支付
			balancePay() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/order/order/proBalancePay',
					method: 'POST',
					data: {
						busid: this.userInfo.id,//用户id
						stoid: this.stoid,//服务门店id
						proid: this.productId,//车辆id
						date: this.reachDate,//到店日期
						free: this.free,//服务费用
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pagesC/order/order?state=2'
								})
							}, 1500)
						}
					},
				})
			},
			//微信支付
			submit() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/order/order/addproduct',
					method: 'POST',
					data: {
						busid: this.userInfo.id,//用户id
						proid: this.productId,//车辆id
						stoid: this.stoid,//门店id
						date: this.reachDate,//到店日期
						free: this.free,//服务费用
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						let data = res.data.data
						let appId = data.appId;
						let timeStamp = data.timeStamp;
						let nonceStr = data.nonceStr;
						let packageX = data.package;
						let signType = data.signType;
						let paySign = data.paySign;
						let orderid = data.orderid;
						let busid = this.userInfo.id
				
						//调用支付接口
						uni.requestPayment({ 
							//下面参数为必传
							provider: 'wxpay', //支付类型
							appId: appId, //小程序Appid
							timeStamp: timeStamp , //创建订单时间戳
							nonceStr: nonceStr,
							package: packageX, // 订单包
							signType: signType, // 加密方式统一'MD5'
							paySign: paySign, // 后台支付签名返回
							success(res) {
								if (res.errMsg === 'requestPayment:ok') {
									uni.request({
										url: uni.getStorageSync('URL') + 'home/order/order/changeOrderStatus',
										method: 'POST',
										data: {
											orderid: orderid,
											busid: busid
										},
										header: {
											"X-Requested-With": "XMLHttpRequest"
										},
										dataType: 'json',
										success: (res)=> {
											uni.$u.toast('支付成功')
											setTimeout(() => {
												uni.reLaunch({
													url: '/pagesC/order/order?state=2'
												})
											}, 1500)
										}
									})
								}
							},
							fail(err) {
								uni.$u.toast('支付失败')
							}
						});
					},
					fail: (res)=> {
						uni.$u.toast('下单失败')
					}
				});
			},
			balanceClick() {
				this.value5 = true
				this.value6 = false	
			},
			weixinClick() {
				this.value5 = false
				this.value6 = true
			},
			//预订按钮
			open() {
				if(this.checkedvalue == false){
					this.rulerShow = true;
					uni.$u.toast('请阅读并同意二手车交易规则')
				}else{
					this.modalShow = true
					let freeNumber = parseFloat(this.free);
					let balanceNumber = parseFloat(this.balance);
					
					if(freeNumber <= balanceNumber){
						this.balanceRadio = false
					}else if(freeNumber > balanceNumber){
						this.balanceRadio = true
					}
				}
			},
			//获取3天后的日期
			getDates() {
				const today = new Date();
				const tomorrow = new Date();
				const reach = new Date();
				tomorrow.setDate(today.getDate() + 3);
				reach.setDate(today.getDate() + 1);

				const yearreach = reach.getFullYear();//年
				const monthreach = reach.getMonth() + 1;//月
				const dayreach = reach.getDate();//日
				const yearTomorrow = tomorrow.getFullYear();//年
				const monthTomorrow = tomorrow.getMonth() + 1;//月
				const dayTomorrow = tomorrow.getDate();//日
				this.estimateTime = `${monthTomorrow}月${dayTomorrow}日`;
				this.reachDate = `${yearreach}年${monthreach}月${dayreach}日 10:00:00`;
			},
			checkedClick() {
				this.checkedvalue = !this.checkedvalue
				this.rulerShow = false
			},
			dateConfirm(e) {
				this.reachDate = e.year + '年' + e.month + '月' + e.day + '日' + ' ' + e.hour + ':' + e.minute + ':00'
			},
			//获取产品详情
			getProdcutInfo() {
				this.loadingshow = true;
				uni.request({
					url: uni.getStorageSync('URL') +'home/product/product/info',
					method: 'POST',
					data: {
						id: this.productId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.productInfo = res.data.data.info
						this.stoid = res.data.data.info.stoid
						this.carfree = res.data.data.info.price
						this.comfree = res.data.data.info.commission
						this.platformFee = res.data.data.info.platformFee
						this.getcost()
						this.loadingshow = false;
					}
				})
			},
			// 获取用户信息
			getUserData() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/user/User/getUserDetail',
					method: 'POST',
					data: {
						busid: this.userInfo.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							const result = res.data.data
							this.balance = result.money
						}
					},
				})
			},
			// 获取全部费用详情
			getescfreeinfo() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/product/product/escfreeinfo',
					method: 'POST',
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							const result = res.data.data
							this.freeinfo = result
						}
					},
				})
			},
			//计算总费用
			getcost() {
				const carfree = this.carfree
				const comfree = this.comfree
				const platformFee = this.platformFee
				const convertedCarfree = parseFloat(carfree) * 10000;
				const convertedComfree = parseFloat(comfree);
				const converComfree = parseFloat(platformFee);
				const sum = convertedCarfree + convertedComfree;
				this.cost = sum
				this.carfree = convertedCarfree
				this.comfree = convertedComfree
				this.platformFee = converComfree
			},
			//登陆函数
			login() {
				console.log('去登录')
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			getclause() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/carpark/carpark/clauselist',
					method: 'POST',
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.costShowcontnet = res.data.data.data4
					}
				})								
			},
		},
		onReady() {
			
		},
		filters: {
			
		},
	}
</script>

<style scoped lang="scss">
page {
	background-color: #f6f7fb;
}
.content-product {
	width: 95%;
	margin: 15rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	display: flex;
	.product-left {
		width: 30%;
		height: 150rpx;
		image {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.product-right {
		width: 70%;
		height: 150rpx;
		.right-name {
			height: 75rpx;
			margin-top: 8rpx;
			margin-left: 15rpx;
		}
		.right-info {
			height: 75rpx;
			line-height: 75rpx;
			margin-left: 15rpx;
		}
	}
}
.plan {
	width: 95%;
	margin: 15rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	letter-spacing: 1px;
	.plan-title {
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 30rpx;
		font-size: 19px;
		font-weight: bold;
		color: black;
	}
	.plan-storename {
		margin-left: 30rpx;
		margin-top: 15rpx;
		font-size: 1rem;
		font-weight: bold;
		color: black;
	}
	.plan-address {
		margin-top: 8rpx;
		margin-left: 30rpx;
		font-size: 0.85rem;
		color: #6b6a6f;
	}
	.plan-tips {
		margin-left: 30rpx;
		margin-top: 15rpx;
		font-size: 1rem;
		font-weight: bold;
		color: #4d4d4d;
	}
}
.free {
	width: 95%;
	margin: 15rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	letter-spacing: 1px;
	.select{
		background-color: #f5f3f6;
		width: 90%;
		height: auto;
		margin: 0 auto;
		padding: 15rpx;
		border-radius: 30rpx;
		// box-shadow: 0px 5px 10px 0px #2279ee;
		.sel-content {
			padding: 10px;
			margin-top: 15rpx;
			.con-title {
				color: #db8b36;
				font-size: 0.9rem;
				text-align: center;
			}
			.con-content{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: 1.3rem;
				color: black;
				.content-item {
					font-size: 1.3rem;
					color: black;
					display: flex;
				}
			}
		}
		.sel-time {
			padding: 10px;
			margin-top: 15rpx;
			.time-title {
				text-align: center;
				font-size: 0.9rem;
				color: #db8b36;
			}
			.time-content {
				.con-content {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-around;
					font-size: 1.3rem;
					color: black;
				}
				
			}
		}
		.sel-but {
			margin-top: 15rpx;
		}
	}
}
.expenseDetails {
	width: 95%;
	margin: 15rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	letter-spacing: 1px;
	.expenseDetails-title {
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 30rpx;
		font-size: 19px;
		font-weight: bold;
		color: black;
	}
	.expenseDetails-list {
		width: 90%;
		margin: 15rpx auto;
		.list-item {
			margin-top: 15rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 1rem;
		}
	}
	.expenseDetails-line {
		width: 90%;
		margin: 15rpx auto;
		height: 20rpx;
	}
	.expenseDetails-cost {
		width: 90%;
		margin: 15rpx auto;
		display: flex;
		justify-content: space-between;
		.cost-left {
			display: flex;
			font-size: 1.1rem;
		}
		.cost-right {
			display: flex;
		}
	}
	.expenseDetails-step {
		width: 90%;
		margin: 15rpx auto;
		padding: 10rpx;
		background-color: #f6f7fb;
	}
}
.credential {
	width: 95%;
	margin: 15rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	letter-spacing: 1px;
	.credential-title {
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 30rpx;
		font-size: 19px;
		font-weight: bold;
		color: black;
	}
	.credential-list {
		width: 90%;
		margin: 15rpx auto;
		font-size: 1rem;
		.list-item {
			width: 100%;
			margin-top: 10rpx;
		}
	}
	.credential-tips {
		width: 90%;
		margin: 15rpx auto;
		font-size: 1rem;
	}
}
.ensure {
	width: 95%;
	margin: 15rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	letter-spacing: 1px;
	.ensure-title {
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 30rpx;
		font-size: 19px;
		font-weight: bold;
		color: black;
	}
	.ensure-list {
		width: 90%;
		margin: 15rpx auto;
		.list-item {
			margin-top: 15rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 1rem;
		}
		.list-line {
			width: 90%;
			margin: 15rpx auto;
			height: 20rpx;
		}
	}
}
.term {
	width: 90%;
	height: 80rpx;
	line-height: 80rpx;
	margin: 20rpx auto;
	display: flex;
	font-size: 1rem;
	.termleft {
		margin-left: 80rpx;
	}
	.termright {
		margin-left: 5rpx;
		color: #109542;
	}
}
.tips {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	position: fixed;
	bottom: 60px;
	background-color: #f7fbfe;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.9);
	color: #636468;	
}
.footer {
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	.footer-but {
		width: 90%;
		margin: 15rpx auto;
	}
}
.costShow, .credentialShow {
	.costShow-title, .credentialShow-title {
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 30rpx;
		font-size: 1.25rem;
		text-align: left;
		font-weight: bold;
		color: black;
	}
	.costShow-list, .credentialShow-list {
		width: 90%;
		margin: 20rpx auto;
		.list-item {
			margin-top: 15rpx;
			.item-img {
				width: 260px;
				height: 180px;
				image {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}
	}
	.content-buttom {
		width: 100%;
		position: absolute; 
		bottom: 40rpx; 
		left: 0; 
		right: 0; 
		text-align: center;
	}
}
.ensureShow {
	.ensureShow-title {
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 30rpx;
		font-size: 1.25rem;
		text-align: left;
		font-weight: bold;
		color: black;
	}
	.ensureShow-list {
		width: 90%;
		margin: 20rpx auto;
		.list-item {
			margin-top: 20rpx;
			.item-title {
				font-size: 1.1rem;
				color: black;
				font-weight: bold;
			}
			.item-text {
				font-size: 1rem;
			}
		}
	}
}
.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding-left: 30rpx;
	.content-cancel {
		text-align: right;
		margin-right: 30rpx;
		margin-top: 15rpx;
	}
	.content-select {
		text-align: center;
		margin-top: 20rpx;
		font-size: 1.25rem;
	}
	.content-price {
		text-align: center;
		font-size: 1.25rem;
	}
	.content-opt {
		margin-top: 15rpx;
		padding: 15rpx;
		.balance {
			height: 100rpx;
			line-height: 100rpx;
			.balance-opt {
				display: flex;
				justify-content: space-between;
				.opt-title {
					font-size: 1.25rem;
				}
			}
			.balance-yue {
				text-align: right;
				margin-right: 50rpx;
			}
		}
		.weixin {
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			.weixin-title {
				font-size: 1.25rem;
			}
		}
	}
}
</style>
